<script setup>
const props = defineProps({
    name: {
        type: String,
        default: '',
    },
    isShow: {
        type: Boolean,
        default: false,
    },
    tip: {
        type: String,
        default: '',
    }
})
</script>
<template>
    <div class="header">
        <div :class="['header-icon',{'header-icon-show':isShow},{'header-icon-hide':!isShow}]"></div>
        <div class="header-name">{{ name }}</div>
        <el-tooltip class="box-item" effect="dark" :content="tip" placement="top">
            <div class="header-tip"></div>
        </el-tooltip>
    </div>
</template>
<style lang="scss" scoped>
.header{
    display: flex;
    align-items: center;
    &-icon{
        width: 25px;
        height: 25px;
    }
    &-icon-show{
        background: url('../../assets/icons/show.png') no-repeat center center/100%;
    }
    &-icon-hide{
        background: url('../../assets/icons/hide.png') no-repeat center center/100%;
    }
    &-tip{
        width: 15px;
        height: 15px;
        cursor: pointer;
        background: url('../../assets/icons/tip.png') no-repeat center center/100%;
    }
    &-name{
        font-family: MiSansVF_Demibold;
        font-size: 25px;
        color: #000000;
        line-height: 33px;
        margin-left: 15px;
        margin-right: 5px;
    }
}
</style>
